Dynamic লিস্ট আপডেট এবং রিফ্রেশ করা

Riot.js এ Dynamic List Update এবং Refresh করা খুবই সহজ এবং একে একে অটোমেটিক রেন্ডারিংয়ের মাধ্যমে করা যায়। Riot.js এর ডাটা বাইন্ডিং সিস্টেম এবং ইভেন্ট ব্যবস্থাপনার মাধ্যমে আপনি সহজেই একটি লিস্টের উপাদানগুলো অ্যাড, ডিলিট অথবা আপডেট করতে পারবেন এবং UI স্বয়ংক্রিয়ভাবে রিফ্রেশ হবে।

Dynamic List Update এবং Refresh

ধরা যাক, আপনি একটি ডাইনামিক লিস্ট তৈরি করতে চান যেখানে আপনি আইটেমগুলো যোগ, মুছে ফেলতে বা আপডেট করতে পারবেন। Riot.js এর ডাটা বাইন্ডিং ব্যবহার করে এই কাজগুলো খুব সহজেই করা যায়।

১. ডাটা বাইন্ডিং এবং লিস্টের আইটেম রেন্ডারিং

Riot.js তে একটি ডাটা অ্যারে বা অবজেক্টকে বাইন্ড করা হয় এবং সেই অনুযায়ী ডাটা পরিবর্তন হলে UI আপডেট হয়ে যায়। আমরা নিচে একটি ডাইনামিক লিস্টের উদাহরণ দেখবো যেখানে আইটেমগুলো অ্যাড এবং রিমুভ করা যায়।

Example: Dynamic List

List.riot (কম্পোনেন্ট):

<!-- List.riot -->
<list-component>
  <h2>Dynamic List</h2>
  
  <ul>
    <li each={item in items}>
      {item}
      <button onclick={removeItem(item)}>Remove</button>
    </li>
  </ul>
  
  <input ref={input} type="text" placeholder="Add item" />
  <button onclick={addItem}>Add Item</button>

  <script>
    export default {
      items: [], // ডাইনামিক আইটেমগুলি

      addItem() {
        const newItem = this.refs.input.value;
        if (newItem) {
          this.items.push(newItem); // নতুন আইটেম অ্যাড করা
          this.refs.input.value = ''; // ইনপুট ক্লিয়ার করা
        }
      },

      removeItem(item) {
        this.items = this.items.filter(i => i !== item); // আইটেম রিমুভ করা
      }
    }
  </script>
</list-component>

এখানে:

• <ul><li each={item in items}>: each ডিরেকটিভ ব্যবহার করে items অ্যারে থেকে প্রতিটি আইটেমকে লুপ করে দেখানো হচ্ছে।
• this.items.push(newItem): addItem ফাংশনে ইনপুট থেকে নতুন আইটেম নেয়া হচ্ছে এবং items অ্যারে তে যোগ করা হচ্ছে।
• this.items = this.items.filter(i => i !== item): removeItem ফাংশনে একটি নির্দিষ্ট আইটেম রিমুভ করা হচ্ছে।

২. List Update (UI Refresh)

Riot.js এর ডাটা বাইন্ডিং ফিচারটি স্বয়ংক্রিয়ভাবে লিস্ট আপডেট করে যখন আপনি items অ্যারেতে কোন পরিবর্তন করেন। উদাহরণস্বরূপ:

• অ্যাড: নতুন আইটেম অ্যাড করলে লিস্ট স্বয়ংক্রিয়ভাবে রিফ্রেশ হবে।
• রিমুভ: একটি আইটেম মুছে ফেললে UI তাও স্বয়ংক্রিয়ভাবে আপডেট হবে।

Riot.js এর reactive data binding সিস্টেমের মাধ্যমে ডাটা পরিবর্তন হলে UI তৎক্ষণাৎ আপডেট হয়ে যায়, এবং আপনাকে DOM ম্যানিপুলেশন করার দরকার পড়ে না।

৩. এনিমেশন (ঐচ্ছিক)

আপনি চাইলে ডাইনামিক লিস্টের আইটেম অ্যাড বা রিমুভ করার সময় কিছু অ্যানিমেশনও যোগ করতে পারেন। উদাহরণস্বরূপ, একটি আইটেম রিমুভ করার সময় একটি স্লাইডিং বা ফেডিং অ্যানিমেশন ব্যবহার করা যেতে পারে। Riot.js এই ধরনের অ্যানিমেশন সমর্থন করে, যদিও এর জন্য কিছু অতিরিক্ত CSS কোড প্রয়োজন হতে পারে।

/* ফেড আউট অ্যানিমেশন */
li.removed {
  animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

এখানে removed ক্লাস যোগ করার মাধ্যমে আইটেমটি অ্যানিমেটেডভাবে অদৃশ্য হবে।

৪. List Update with Objects (অবজেক্টের সাথে ডাইনামিক লিস্ট)

আপনি যদি লিস্টে অবজেক্ট ব্যবহার করেন, যেমন নাম, বয়স, বা অন্যান্য ডেটা, তবে আপনি একইভাবে সেগুলোকে ডাইনামিকালি আপডেট করতে পারবেন।

Example: Dynamic List with Objects

<!-- ObjectList.riot -->
<object-list>
  <h2>User List</h2>

  <ul>
    <li each={user in users}>
      {user.name} - {user.age}
      <button onclick={removeUser(user)}>Remove</button>
    </li>
  </ul>

  <input ref={nameInput} type="text" placeholder="Name" />
  <input ref={ageInput} type="number" placeholder="Age" />
  <button onclick={addUser}>Add User</button>

  <script>
    export default {
      users: [], // ডাইনামিক ইউজার লিস্ট

      addUser() {
        const name = this.refs.nameInput.value;
        const age = this.refs.ageInput.value;
        if (name && age) {
          this.users.push({ name, age }); // নতুন ইউজার অ্যাড করা
          this.refs.nameInput.value = ''; // ইনপুট ক্লিয়ার করা
          this.refs.ageInput.value = '';
        }
      },

      removeUser(user) {
        this.users = this.users.filter(u => u !== user); // ইউজার রিমুভ করা
      }
    }
  </script>
</object-list>

এখানে:

• users অ্যারেতে অবজেক্টের তালিকা রাখা হচ্ছে (নাম এবং বয়স সহ)।
• addUser ফাংশনে নতুন ইউজার অ্যাড করা হচ্ছে এবং removeUser ফাংশনে একটি নির্দিষ্ট ইউজার রিমুভ করা হচ্ছে।

৫. List Sort বা Filter (অবজেক্ট বা ডাটা সাজানো বা ফিল্টার করা)

ডাইনামিক লিস্টে আপনি চাইলে ডাটা সাজানো বা ফিল্টারও করতে পারেন। Riot.js তে এটি খুব সহজ। নিচে একটি উদাহরণ দেওয়া হল যেখানে একটি লিস্টকে নাম অনুসারে সাজানো হচ্ছে:

Example: Sort List

<!-- SortedList.riot -->
<sorted-list>
  <h2>Sorted List</h2>

  <ul>
    <li each={item in sortedItems}>
      {item.name} - {item.age}
    </li>
  </ul>

  <button onclick={sortByName}>Sort by Name</button>

  <script>
    export default {
      items: [
        { name: 'John', age: 30 },
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 35 }
      ],

      get sortedItems() {
        return this.items.sort((a, b) => a.name.localeCompare(b.name)); // নাম অনুসারে সাজানো
      },

      sortByName() {
        // এখানে আর কোনো কাজ করার প্রয়োজন নেই, `sortedItems` অ্যাক্সেস করলেই লিস্ট সোর্ট হয়ে যাবে
      }
    }
  </script>
</sorted-list>

এখানে, sortedItems একটি গেটর (getter) হিসেবে কাজ করছে, যা items অ্যারেকে নাম অনুসারে সাজিয়ে দেখাবে। যখনই sortByName ফাংশন কল হবে, তখন লিস্টটি নতুন করে সাজানো হবে এবং UI স্বয়ংক্রিয়ভাবে আপডেট হবে।

সারাংশ

Riot.js তে Dynamic List Update এবং Refresh করা খুবই সহজ। আপনি ডাটা বাইন্ডিং এবং each ডিরেকটিভের মাধ্যমে ডাইনামিক লিস্ট তৈরি করতে পারেন এবং ডাটা পরিবর্তন হলে UI স্বয়ংক্রিয়ভাবে রিফ্রেশ হয়। নতুন আইটেম অ্যাড করা, রিমুভ করা বা সাজানো সব কিছুই সহজেই করা যায়। Riot.js এর ডাটা বাইন্ডিং সিস্টেমের মাধ্যমে আপনি খুব কম কোডে জটিল লজিক এবং ইউজার ইন্টারঅ্যাকশন ম্যানেজ করতে পারেন।